<div class="home">

  <!-- 页面顶部轮播图 -->
  <app-carousel #carousel
                [activeIndex]="carouselActiveIndex"
                (changeSlide)="carouselChangeSlide($event)"
  >
    <nz-carousel nzAutoPlay
                 nzEffect="fade"
                 [nzDotRender]="carousel.dotRef"
                 (nzBeforeChange)="carouselBeforeChange($event)"
    >
      <div class="carousel-item" *ngFor="let banner of banners; let key = index;" nz-carousel-content>
        <a [href]="banner.url" target="_blank" class="banner-item">
          <img [src]="banner.imageUrl" alt="banner carousel image">
        </a>
      </div>
    </nz-carousel>
  </app-carousel>

  <!-- 歌单 -->
  <div class="main">
    <div class="wrap">

      <!-- 热门推荐 -->
      <div class="left">
        <div class="sec">
          <div class="up">
            <div class="navs">
              <h2>
                <i></i>
                <a>热门推荐</a>
              </h2>
              <nav>
                <a *ngFor="let tag of hotTags; let key = index;">{{ tag.name }}</a>
              </nav>
            </div>
            <a>
              更多
              <i nz-icon nzType="right" nzTheme="outline"></i>
            </a>
          </div>
          <div class="down">
            <div class="down-wrap">
              <app-single-sheet class="sheet-item"
                                *ngFor="let songSheet of songSheetList;"
                                [songSheet]="songSheet"
                                (playEvent)="onPlaySheet($event)"
              ></app-single-sheet>
            </div>
          </div>
        </div>
      </div>

      <!-- 登录和入驻歌手 -->
      <div class="right">
        <app-member-card></app-member-card>
        <div class="settled-singer">
          <div class="tit"><b>入驻歌手</b></div>

          <div class="list">
            <div class="card" *ngFor="let singer of singers;">
              <div class="pic">
                <img [src]="singer.picUrl" [alt]="singer.name">
              </div>
              <div class="txt">
                <b class="ellipsis">{{ singer.name }}</b>
                <span>专辑 {{ singer.albumSize }}</span>
              </div>
            </div>
          </div>

        </div>
      </div>

    </div>
  </div>

</div>

<app-player></app-player>

<app-layer-modal>
  <app-layer-default></app-layer-default>
</app-layer-modal>
